<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>车享付-我的余额</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="css/trading-query.css">
<link rel="stylesheet" href="css/myBalance.css">
</head>
<body>
	
  <!--头部开始-->
	<div class="topnav-wrapper">
	  <div class="topnav">
	     <ul class="verify fl-r">
	      <li>
	      	<!-- <a href="javascript:;" class="unverify"><p>Hi,180*****688</p></a> -->
	      	<a href="javascript:;" class="verifyed"><p>Hi，王小熊<span class="font-color-blue">（认证会员）</span></p></a>
	      </li>
	      <li><p>上次登录：上海市</p></li>
	      <li>
	      	<a class="ser-cor" href="#">
          		<i class="carpay-icon service-icon"></i>
          		客服中心
        	</a>
        </li>
        <li class="last"><a href="#"><span class="font-color-blue">退出</span></a></li>
	     </ul>
	  </div>
	</div>
	<!-- end topnav-wrapper -->
	
	<div class="headernav-wrapper">
	    <div class="header clearfix">
	        <div class="header-left fl-l clearfix">
	          <a href="#" class="carpay-logo fl-l">
	              <img src="images/logo.png" alt="车享付" width="169px" height="49px">
	              <span class="line"></span>
	              <img src="images/logo-slogan.png" alt="车享生活放心支付" width="194px" height="24px">
	          </a>
	        </div>
	        <div class="header-right fl-l clearfix">
	             <ul class="navigation fl-r clearfix">
	              <li><a href="javascript:;">我的车享付</a></li>
	              <li><a href="javascript:;" class="active">交易查询</a></li>
	              <li><a href="javascript:;">安全中心</a></li>
	              <li class="last"><a href="javascript:;">服务中心</a></li>
	             </ul>
	        </div>
	    </div>
	</div>
	<!--end 头部开始-->
	
	<!--主体开始 -->
	<div class="center">
		<div class="content clearfix">
			<!-- 左边开始 -->
			<div class="base-info">
				
				 <!-- 交易查询导航 -->
				 <dl class="account-info clearfix">
	          <dt class="base-info-tit mb-30">交易查询</dt>
	          <dd class="current">
	            <i class="icon-line"></i>交易记录
	            <i class="carpay-icon arrow"></i>
	          </dd>
	          <dd>充值记录<i class="carpay-icon arrow"></i></dd> 
				 </dl>
				 
        <!-- 联系客服 -->
				<div class="service-info clearfix">
					<div class="base-info-tit">联系客服</div>
					<dl>
						<dd class="tel-text">
							<i class="base-icon tel-icon"><label class="icon-text">客服服务电话</label></i>
							<p class="tel-num">4008 020 666</p>
						</dd>
						<dd class="eml-text">
							<i class="base-icon eml-icon"><label class="icon-text">客服邮箱</label></i>
							<p class="eml-num"><a href="mailto:chexiang@cxf.com">chexiang@cxf.com</a></p>
						</dd>
					</dl>
				</div>
				
			</div>
			
     <!-- 右边开始 -->
			<div class="carpay-wrap">
        
        <div class="m-balances">
        	<ul class="recharge-crumbs clear">
        		<li>
        			<a href="#">我的余额</a>
        		</li>
        		<li>
        			<span> > </span>
        		</li>
        		<li>
        			<a href="#" class="recharge">充值</a>
        		</li>
        	</ul>
        	
	        <div class="m-recharge clear">
	        	<div class="recharge-accout fl">
	        		<h2>我的车享账户</h2>
	        		<p class="font-color-999">上次登陆时间：<span>2016.09.08 10:22:25</span></p>
	        	</div>
	        	<div class="recharge-price fr">
	        		<p class="font-color-999">当前余额</p>
	        		<h2 class="c-red-f4s">3456<span>.47元</span></h2>
	        	</div>
	        </div>

	        <div class="recharge-money">
				<ul>
        			<li>
        				<div class="recharge-money-title">充值金额：</div>
        				<div class="recharge-money-con recharge-count">
        					<span class="mr-10"><a href="javascript: void(0);" class="pr">5000元</a></span>
        					<span class="mr-10 carpay-icon"><a href="javascript: void(0);" class="pr c-03a9f4">10000元</a></span>
        				</div>
        				 <!--错误区域  去除类显示： dsp-n-->
        				<div class="recharge-money-error c-red-f4 recharge-money-error-info">请选择充值金额</div>
        			</li>
        			<li class="give">
        				<div class="recharge-money-title">赠送：</div>
        				<div class="recharge-money-con recharge-money-z">2000元</div>
        			</li>
					<li class="invoice">
						<div class="recharge-money-title">需要发票：</div>
						<div class="recharge-money-con recharge-money-z invoice-cont">
							<span><a href="javascript: void(0);" class="pr" id="needInvoice"><i class="invoice-radio"></i>是</a></span>
							<span><a href="javascript: void(0);" class="pr" id="noInvoice"><i class="invoice-radio invoice-active"></i>否</a></span>
						</div>
					</li>
        		</ul>
				<ul id="invoiceInfo" class="invoice-info">
					<li>
						<div class="recharge-money-title">发票类型：</div>
						<div class="recharge-money-con recharge-count">
							<span class="mr-10 carpay-icon"><a id="invoiceNormal" href="javascript: void(0);" class="pr c-03a9f4">普通发票</a></span>
							<span class="mr-10"><a id="invoiceVat" href="javascript: void(0);" class="pr">增值税发票</a></span>
						</div>
					</li>
					<li>
						<div class="recharge-money-title">发票抬头：</div>
						<div class="recharge-money-con recharge-count h-auto">
							<span class="mr-10 carpay-icon js-invoice-cate"><a id="invoicePersonal" href="javascript: void(0);" class="pr c-03a9f4">个人</a></span>
							<span class="mr-10 js-invoice-cate"><a id="invoiceCompany" href="javascript: void(0);" class="pr">公司</a></span>
							<span class="invoice-company"><input type="text" class="invoice-company-input" placeholder="请填写公司发票抬头"/></span>
						</div>
					</li>
					<li>
						<div class="recharge-money-title">发票内容：</div>
						<div class="recharge-money-con">
							<select class="invoice-category-slt">
								<option value="1">明细</option>
							</select>
						</div>
					</li>
					<li class="company-info js-company-info">
						<div class="recharge-money-title">企业信息：</div>
						<div class="recharge-money-con">
							<a href="javascript: void(0)" id="companyNewBtn" class="address-change">新增企业信息</a>
						</div>
					</li>
                    <li class="company-info js-company-info">
                        <div class="recharge-money-title">企业信息：</div>
                        <div class="recharge-money-con address-cont">
                            <span class="receiver">王五  13032337788</span>
                            <span class="address">江苏省无锡市南长区华山路1520弄九龙仓11号楼206室</span>
                            <a href="javascript: void(0)" id="companyEditBtn" class="address-change address-edit company-address-edit">修改</a>
                        </div>
                    </li>
					<li>
						<div class="recharge-money-title">收货人信息：</div>
						<div class="recharge-money-con">
							<a id="addressNewBtn" class="address-change" href="javascript: void(0)">新增收货地址</a>
						</div>
					</li>
					<li class="receiver-info js-receiver-info">
						<div class="recharge-money-title">收货人信息：</div>
						<div class="recharge-money-con address-cont">
							<span class="receiver">王五  13032337788</span>
							<span class="address">江苏省无锡市南长区华山路1520弄九龙仓11号楼206室</span>
							<a href="javascript: void(0)" id="addressEditBtn" class="address-change address-edit">修改</a>
							<i class="address-split">|</i>
							<a href="javascript: void(0)" id="addressMoreBtn" class="address-change address-slt">更多</a>
						</div>
					</li>
				</ul>
				<ul>
					<li>
						<button type="button" class="btn recharge-money-btn">确认充值</button>
					</li>
				</ul>
	        </div>
	        
	        <div class="recharge-info">
	        	<h3>充值未成功我该怎么办？</h3>
	        	<p>答：请您先确认充值的银行账户中是否被扣款，若已扣款再核实车享账户中是否到帐。如果您的银行账户已扣款但车享账户未到帐，请致电车享付客服 <em>4008020666</em>，将有专人记录处理。</p>
	        </div>
	        
        </div>
			</div>
     <!-- 右边结束 --> 
		</div>
		<!--end content-->
	</div>
	<!--end 主体开始-->
  	<div class="mask js-mask">
		<!--新增收货地址-->
		<div id="addressNew" class="modal modal-address-new">
			<div class="modal-header">
                <span class="modal-header-tit">新增收货地址</span>
                <a href="javascript:void(0)" class="js-modal-close modal-close"><i></i></a>
            </div>
			<div class="modal-body">
				<ul class="address-info">
					<li class="address-info-item">
						<span class="address-item-tit"><i class="icon-required">*</i>收货人</span>
						<span class="address-item-cont">
							<input class="modal-input" placeholder="长度不能超过25个字符"/>
							<!--error-->
							<div class="modal-error modal-error-arrow"><i></i>请填写收货人姓名</div>
						</span>
					</li>
					<li class="address-info-item">
						<span class="address-item-tit"><i class="icon-required">*</i>所在地区</span>
						<span class="address-item-cont">
							<span>
								<select class="modal-address-slt">
									<option value="-1">请选择省</option>
									<option value="1">上海市</option>
								</select>
							</span>
							<span>
								<select class="modal-address-slt">
									<option value="-1">请选择市</option>
									<option value="1">上海市</option>
								</select>
							</span>
							<span>
								<select class="modal-address-slt">
									<option value="-1">请选择区</option>
									<option value="1">徐汇区</option>
								</select>
							</span>
							<!--error-->
							<div class="modal-error"><i></i>请填写正确的省市区</div>
						</span>
					</li>
					<li class="address-info-item">
						<span class="address-item-tit"><i class="icon-required">*</i>详细地址</span>
						<span class="address-item-cont"><input class="modal-input w-498" placeholder="如您不清楚邮递区号，请填写000000"/></span>
					</li>
					<li class="address-info-item">
						<span class="address-item-tit"><i class="icon-required">*</i>邮编</span>
						<span class="address-item-cont">
							<input class="modal-input"/>
							<!--error-->
							<div class="modal-error modal-error-arrow"><i></i>请填写收货地址邮编</div>
						</span>
					</li>
					<li class="address-info-item">
						<span class="address-item-tit"><i class="icon-required">*</i>手机号码</span>
						<span class="address-item-cont">
							<input class="modal-input"/>
							<!--error-->
							<div class="modal-error modal-error-arrow"><i></i>请填写手机号码</div>
						</span>
					</li>
					<li class="address-info-item">
						<span class="address-item-tit">固定电话</span>
						<span class="address-item-cont">
							<input class="modal-input"placeholder="非必选"/>
						</span>
					</li>
					<li class="address-info-item"><a id="addressDefault" class="address-default active" href="javascript: void(0)"><i></i>设置为默认收获地址</a></li>
					<li class="address-info-item"><button type="button" class="btn save-address-btn">保存收货地址</button></li>
				</ul>
			</div>
		</div>

        <!--修改企业信息-->
        <div id="companyEdit" class="modal modal-company-edit">
            <div class="modal-header">
                <span class="modal-header-tit">修改企业信息</span>
                <a href="javascript:void(0)" class="js-modal-close modal-close"><i></i></a>
            </div>
            <div class="modal-body">
                <ul class="address-info">
                    <li class="address-info-item">
                        <span class="address-item-tit w-125"><i class="icon-required">*</i>纳税人识别码</span>
                        <span class="address-item-cont pdl-20">
							<input type="text" class="modal-input" placeholder="由18位数字或字母组成"/>
                            <!--ok-->
							<div class="modal-ok"></div>
						</span>
                    </li>
                    <li class="address-info-item">
                        <span class="address-item-tit w-125"><i class="icon-required">*</i>注册地址</span>
                        <span class="address-item-cont pdl-20">
							<input type="text" class="modal-input"/>
                            <!--error-->
							<div class="modal-error modal-error-arrow"><i></i>注册地址不能为空</div>
						</span>
                    </li>
                    <li class="address-info-item">
                        <span class="address-item-tit w-125"><i class="icon-required">*</i>注册电话</span>
                        <span class="address-item-cont pdl-20">
                            <input type="text" class="modal-input" placeholder="A-0319248"/>
                            <!--error-->
							<div class="modal-error modal-error-arrow"><i></i>注册电话格式不正确</div>
                        </span>
                    </li>
                    <li class="address-info-item">
                        <span class="address-item-tit w-125"><i class="icon-required">*</i>开户银行</span>
                        <span class="address-item-cont pdl-20">
							<input class="modal-input"/>
                            <!--error-->
							<div class="modal-error modal-error-arrow"><i></i>开户银行不能为空</div>
						</span>
                    </li>
                    <li class="address-info-item">
                        <span class="address-item-tit w-125"><i class="icon-required">*</i>银行账户</span>
                        <span class="address-item-cont pdl-20">
							<input class="modal-input"/>
                            <!--error-->
							<div class="modal-error modal-error-arrow"><i></i>银行账户不能为空</div>
						</span>
                    </li>
                    <li class="address-info-item">
                        <span class="address-item-cont pdl-20 mt-5">
                            <button type="button" class="btn save-address-btn save-company-btn">保存企业信息</button>
                        </span>
                    </li>
                </ul>
            </div>
        </div>

		<!--更多收获地址-->
		<div id="addressMore" class="modal modal-address-more">
			<div class="modal-header">
                <span class="modal-header-tit">更多收货地址</span>
                <a href="javascript:void(0)" class="js-modal-close modal-close"><i></i></a>
            </div>
			<div class="modal-body">
                <div class="more-btn-wrap">
                    <button type="button" id="moreAddAddressBtn" class="btn more-address-btn">新增收货地址+</button>
                </div>
				<ul class="address-more">
					<li class="address-more-item address-more-active">
                        <span class="address-radio js-address-radio"></span>
                        <a class="address-more-wrap" href="javascript: void(0)">
                            <div class="more-item-tit">
                                <span>李易峰</span><span>上海</span><span class="f-grey">默认地址</span>
                            </div>
                            <div class="more-item-cont">
                                <span class="more-cont-item">
                                    <span class="more-cont-tit">收货人：</span>
                                    <span class="more-cont">李易峰</span>
                                </span>
                                <span class="more-cont-item">
                                    <span class="more-cont-tit">所在地区：</span>
                                    <span class="more-cont">上海 嘉定区 博乐南路 125号</span>
                                </span>
                                <span class="more-cont-item">
                                    <span class="more-cont-tit">手机/电话：</span>
                                    <span class="more-cont">180****2693 021-90898767</span>
                                </span>
                                <span class="more-cont-item">
                                    <span class="more-cont-tit">邮编：</span>
                                    <span class="more-cont">201824</span>
                                </span>
                            </div>
                        </a>
					</li>
                    <li class="address-more-item">
                        <span class="address-radio js-address-radio"></span>
                        <a class="address-more-wrap" href="javascript: void(0)">
                            <div class="more-item-tit">
                                <span>李易峰</span><span>上海</span>
                            </div>
                            <div class="more-item-cont">
                                <span class="more-cont-item">
                                    <span class="more-cont-tit">收货人：</span>
                                    <span class="more-cont">李易峰</span>
                                </span>
                                <span class="more-cont-item">
                                    <span class="more-cont-tit">所在地区：</span>
                                    <span class="more-cont">上海 嘉定区 博乐南路 125号</span>
                                </span>
                                <span class="more-cont-item">
                                    <span class="more-cont-tit">手机/电话：</span>
                                    <span class="more-cont">180****2693 021-90898767</span>
                                </span>
                                <span class="more-cont-item">
                                    <span class="more-cont-tit">邮编：</span>
                                    <span class="more-cont">201824</span>
                                </span>
                            </div>
                        </a>
                    </li>
                    <li class="address-more-item">
                        <span class="address-radio js-address-radio"></span>
                        <a class="address-more-wrap" href="javascript: void(0)">
                            <div class="more-item-tit">
                                <span>李易峰</span><span>上海</span>
                            </div>
                            <div class="more-item-cont">
                                <span class="more-cont-item">
                                    <span class="more-cont-tit">收货人：</span>
                                    <span class="more-cont">李易峰</span>
                                </span>
                                <span class="more-cont-item">
                                    <span class="more-cont-tit">所在地区：</span>
                                    <span class="more-cont">上海 嘉定区 博乐南路 125号</span>
                                </span>
                                <span class="more-cont-item">
                                    <span class="more-cont-tit">手机/电话：</span>
                                    <span class="more-cont">180****2693 021-90898767</span>
                                </span>
                                <span class="more-cont-item">
                                    <span class="more-cont-tit">邮编：</span>
                                    <span class="more-cont">201824</span>
                                </span>
                            </div>
                        </a>
                    </li>
                    <li class="address-more-item">
                        <span class="address-radio js-address-radio"></span>
                        <a class="address-more-wrap" href="javascript: void(0)">
                            <div class="more-item-tit">
                                <span>李易峰</span><span>上海</span>
                            </div>
                            <div class="more-item-cont">
                                <span class="more-cont-item">
                                    <span class="more-cont-tit">收货人：</span>
                                    <span class="more-cont">李易峰</span>
                                </span>
                                <span class="more-cont-item">
                                    <span class="more-cont-tit">所在地区：</span>
                                    <span class="more-cont">上海 嘉定区 博乐南路 125号</span>
                                </span>
                                <span class="more-cont-item">
                                    <span class="more-cont-tit">手机/电话：</span>
                                    <span class="more-cont">180****2693 021-90898767</span>
                                </span>
                                <span class="more-cont-item">
                                    <span class="more-cont-tit">邮编：</span>
                                    <span class="more-cont">201824</span>
                                </span>
                            </div>
                        </a>
                    </li>
				</ul>
                <div class="mt-20">
                    <button type="button" class="btn save-address-btn">确认</button>
                </div>
			</div>
		</div>
  	</div>
	<script src="js/jquery_1_8_3.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		// 切换边框样式
		$('.recharge-count a').on('click', function () {
			
			$(this).addClass('c-03a9f4')
				.parent('span')
				.siblings()
				.children('a')
				.removeClass('c-03a9f4');
				
		});

		// 切换radio样式
		$('.invoice-cont a').on('click', function () {
			$('.invoice-radio').removeClass('invoice-active');
			$(this).find('.invoice-radio').addClass('invoice-active');

		});

        //关闭modal
        $('.js-modal-close').on('click', function () {
            $(this).parents('.modal').css('display','none');
            $('.js-mask').css('display','none');
        });

		//需要发票
		$('#needInvoice').on('click', function () {
			$('#invoiceInfo').css("display","inline-block");
		});

		//不需要发票
		$('#noInvoice').on('click', function () {
			$('#invoiceInfo').css("display","none");
		});

		//个人发票
		$('#invoicePersonal').on('click', function () {
			$('.invoice-company-input').css("display","none");
		});

		//公司发票
		$('#invoiceCompany').on('click', function () {
			$('.invoice-company-input').css("display","block");
		});

		//普通发票
		$('#invoiceNormal').on('click', function () {
			$('.js-invoice-cate').css("display","inline-block");
            $('.js-receiver-info').css("display","block");
            $('.js-company-info').css("display","none");
			$('#invoicePersonal').click();
		});

        //增值税发票
        $('#invoiceVat').on('click', function () {
            $('.js-invoice-cate').css("display","none");
            $('.js-receiver-info').css("display","none");
            $('.invoice-company-input').css("display","block");
            $('.js-company-info').css("display","block");
        });

		//设置为默认收获地址
		$('#addressDefault').on('click', function () {
			if($(this).hasClass('active')){
				$(this).removeClass('active');
			}else{
				$(this).addClass('active');
			}
		});

		//新增收货地址
		$('#addressNewBtn').on('click', function () {
			$('.js-mask').css('display','block');
			$('#addressNew').css('display','block');
            $('#addressNew .modal-header-tit').text('新增收货地址');
		});

        //修改收货地址
        $('#addressEditBtn').on('click', function () {
            $('.js-mask').css('display','block');
            $('#addressNew').css('display','block');
            $('#addressNew .modal-header-tit').text('修改收货地址');
        });

        //更多
        $('#addressMoreBtn').on('click', function () {
            $('.js-mask').css('display','block');
            $('#addressMore').css('display','block');
        });

        //更多收货地址——新增收货地址
        $('#moreAddAddressBtn').on('click', function () {
            $('#addressMore').css('display','none');
            $('.js-mask').css('display','block');
            $('#addressNew').css('display','block');
            $('#addressNew .modal-header-tit').text('新增收货地址');
        });

        //更多收货地址选中
        $('.address-more-item').on('click', function () {
            $(".address-more-active").removeClass('address-more-active');
            $(this).addClass('address-more-active');
        });

        //新增企业信息
        $('#companyNewBtn').on('click', function () {
            $('.js-mask').css('display','block');
            $('#companyEdit').css('display','block');
            $('#companyEdit .modal-header-tit').text('新增企业信息');
        });

        //修改企业信息
        $('#companyEditBtn').on('click', function () {
            $('.js-mask').css('display','block');
            $('#companyEdit').css('display','block');
            $('#companyEdit .modal-header-tit').text('修改企业信息');
        });
	</script>
</body>
</html>